<template>
  <div :id="id" :style="{width: '100%', height: '300px'}"></div>
</template>

<script>
    export default {
        name: "statistics",
        data(){
            return{

            }
        },
        watch:{
            itemListMsg:{
                handler(newValue, oldValue) {
                  // for (let i = 0; i < newValue.length; i++) {
                  //     if (oldValue[i] != newValue[i]) {
                          this.itemListMsg = newValue
                          this.showChars()
                  //     }
                  // }
                },
                deep: true
            },
            itemList:{
                handler(newValue, oldValue) {
                    // for (let i = 0; i < newValue.length; i++) {
                    //     if (oldValue[i] != newValue[i]) {
                    this.itemList = newValue
                    this.showChars()
                    //     }
                    // }
                },
            }
        },
        props:{
          id:{
              Type:String,
              default:""
          },
          title:{
              Type:String,
              default:""
          },
          subtext:{
              Type:String,
              default:""
          },
          itemList:{
              Type:Array,
              default: []
          },
          itemListMsg:{
              Type:Array,
              default:[]
          },
        },
        mounted() {
            this.showChars()
        },
        methods:{
            showChars(){
                var dom = document.getElementById(this.id)
                var myChart = this.echarts.init(dom)
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: this.title,
                        subtext: this.subtext,
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    // legend: {
                    //     orient: 'vertical',
                    //     left: 'left',
                    //     // data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                    //     data:this.itemList
                    // },
                    series : [
                        {
                            name: this.title,
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            // data:[
                            //     {value:335, name:'直接访问'},
                            //     {value:310, name:'邮件营销'},
                            //     {value:234, name:'联盟广告'},
                            //     {value:135, name:'视频广告'},
                            //     {value:1548, name:'搜索引擎'}
                            // ],
                            data:this.itemListMsg,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            },

        }
    }
</script>

<style scoped>

</style>
